import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import * as Device from 'expo-device';

interface Props {

}
interface State {

}

const styles = StyleSheet.create({
  container: {
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff6c05"
  },
  xiaomi_container: {
    height: 60,
    paddingTop: 20,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff6c05",
  },
  iphonex_container: {
    height: 80,
    paddingTop: 35,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff6c05",
  },
  title: {
    color: '#ffffff',
    fontSize: 20
  }
})


export default class HeaderBar extends Component<Props, State> {
  state = {}

  getStyle = () => {
    let name = Device.deviceName;
    console.log('getstyle:', name);
    switch (name) {
      case "begonia":
        return styles.xiaomi_container
      case "iPhone Xʀ":
        return styles.iphonex_container
      default:
        return styles.container
    }
  }

  render() {
    console.log(Device.productName)
    return (
      <View style={this.getStyle()}>
        <Text style={styles.title}>菜谱大全</Text>
      </View>
    )
  }
}
